<template>
  <div class="reviewBox">
    <!-- 顶部 -->
    <div class="review-top"></div>
    <!-- -->
    <div class="review-one">
      <!-- <div class="titleBox">
        <span>未来6小时风力</span>
      </div> -->
    </div>
    <!--  -->
    <div class="review-two">
      <!-- <div class="titleBox">
        <span>未来6小时降雨量</span>
      </div> -->
    </div>
    <!--  -->
    <div class="review-three">
      <!-- <div class="titleBox">
        <span>未来6小时气象</span>
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.reviewBox {
  color: #fff;
  height: 100%;

  .review-top {
    height: 10%;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;

    .tempMessageBox {
      font-weight: bolder;

      h1 {
        font-size: 28px;
      }

      .temp {
        font-size: 20px;

        span {
          font-size: 30px;
        }
      }

      .message {
        font-size: 20px;
      }
    }

    .boxes {
      border: 1px solid #ccc;
      width: 35%;
      padding: 10px;
      font-size: 16px;

      span {
        font-size: 20px;
        font-weight: bolder;
      }
    }
  }

  .review-one {
    height: 38%;
    border: 1px solid #ccc;
    margin: 10px 0;
  }

  .review-two {
    height: 25%;
    border: 1px solid #ccc;
  }

  .review-three {
    height: 25%;
    border: 1px solid #ccc;
    margin-top: 10px;
  }

  .titleBox {
    padding: 5px;
    background: linear-gradient(to right, #0a0909, rgba(225, 225, 225, 0));
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-weight: bolder;
      font-size: 18px;
    }
  }
}
</style>
